<template>
  <div class="mod-config">
    <div v-if="relationVisible">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()" ref="dataForm">
        身份
        <el-form-item>
          <el-select v-model="dataForm.grade" placeholder="请选择会员身份">
            <el-option
              v-for="item in useroption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.nickname" placeholder="昵称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-button @click="search()">查询</el-button>
        <el-button type="primary" @click="download()">下载</el-button>
        <!-- </el-form-item> -->
      </el-form>
      <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
        <el-table-column prop="userId" header-align="center" align="center" label="UID"></el-table-column>
        <el-table-column prop="nickname" header-align="center" align="center" label="昵称"></el-table-column>
        <el-table-column header-align="center" align="center" label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" alt="" style="width: 50px;">
          </template>
        </el-table-column>
        <el-table-column prop="phone" header-align="center" align="center" label="手机号"></el-table-column>
        <el-table-column header-align="center" align="center" label="会员身份">
          <template slot-scope="scope">
            {{scope.row.grade=='1'?'会员':''}}
            {{scope.row.grade=='2'?'经理':''}}
            {{scope.row.grade=='3'?'总监':''}}
            {{scope.row.grade=='4'?'全部':''}}
          </template>
        </el-table-column>
        <el-table-column prop="teamNum" header-align="center" align="center" label="团队总人数"></el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="lookOrCheck(scope.row.userId)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>

    <relation-detail v-else ref="relationDetail" @goBack="showList"></relation-detail>
  </div>
</template>

<script>

import RelationDetail from './relationDetail'

export default {
  data() {
    return {
      relationVisible: true,
      useroption: [
        {
          value: null,
          label: "全部"
        },
        {
          value: "1",
          label: "会员"
        },
        {
          value: "2",
          label: "经理"
        },
        {
          value: "3",
          label: "总监"
        }
      ],
      dataForm: {
        belongGrade: "4",
        orderStatus: "1",
        bigbayAppId: 1,
        grade: null
      },
      projectList: [],
      showDatePicker: false,
      dataList: [],
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      value: "",
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      orderNum: "",
      totalRevenue: "",
      totalVolume: ""
    };
  },
  components: {
    RelationDetail
  },
  activated() {
    this.getDataList();
  },
  methods: {
    search(){
      this.pageIndex = 1;
      this.getDataList();
    },
    //获取总金额
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      let id = ''
      if (process.env.NODE_MYSELF) {
        id = '1488444727727808516'
      } else {
        id = '1485658496549060612'
      }

      let obj = {
        page: this.pageIndex,
        limit: this.pageSize,
        superiorUid: id
      };
      obj.nickname = this.dataForm.nickname
      obj.phone = this.dataForm.phone
      obj.grade = this.dataForm.grade
      this.$http({
        url: this.$http.adornUrl("/sale/saleRelation/saleRelationStatistics/list"),
        method: "get",
        params: this.$http.adornParams(obj)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    lookOrCheck(id) {
      this.relationVisible = false
      this.$nextTick(() => {
        this.$refs.relationDetail.getDataList(id)
      })
    },
    showList() {
      this.relationVisible = true
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    download() {
      let id = ''
      if (process.env.NODE_MYSELF) {
        id = '1488444727727808516'
      } else {
        id = '1485658496549060612'
      }
      let obj = {
        page: this.pageIndex,
        limit: this.pageSize,
        superiorUid: id
      };
      obj.nickname = this.dataForm.nickname
      obj.phone = this.dataForm.phone
      obj.grade = this.dataForm.grade
      this.$http({
        url: this.$http.adornUrl("/sale/saleRelation/saleRelationStatistics/download"),
        method: "get",
        params: this.$http.adornParams(obj),
        headers: {
          "Content-Type": "application/json; application/octet-stream"
        },
        responseType: "arraybuffer"
      }).then(({ data }) => {
        const blob = new Blob([data], { type: "application/vnd.ms-excel" });
        const downloadElement = document.createElement("a");
        const href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = "分销关系统计.xls";
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement); // 下载完成移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.winNumber {
  color: #777;
  margin-bottom: 20px;
  span {
    margin-right: 20px;
  }
}
</style>

